<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奇妙园连线游戏六岁2</title>
    <link rel="stylesheet" href="../../css/currency.css">
    <style>
        .section{
            width: 1080px;
            height: 1920px;
            overflow: hidden;
            position: relative;
        }
        .section:before{
            content: "";
            width: 160%;
            height: 90%;
            background:
                    linear-gradient(36deg, #FFF8A2 42.34%, transparent 42.34%) 0 0,
                    linear-gradient(72deg, #FFFFFF 75.48%, transparent 75.48%) 0 0,
                    linear-gradient(-36deg, #FFF8A2 42.34%, transparent 42.34%) 100% 0,
                    linear-gradient(-72deg, #FFFFFF 75.48%, transparent 75.48%) 100% 0,
                    linear-gradient(36deg, transparent 57.66%, #FFFFFF 57.66%) 100% 100%,
                    linear-gradient(72deg, transparent 24.52%, #FFFA99 24.52%) 100% 100%,
                    linear-gradient(-36deg, transparent 57.66%, #FFFFFF 57.66%) 0 100%,
                    linear-gradient(-72deg, transparent 24.52%, #FFFA99 24.52%) 0 100%,
                    #FFF8A2 linear-gradient(#FFFF8E, #FFFFFF) 50% 100%;
            background-repeat: no-repeat;
            background-size: 50% 50%;
            opacity: 0;
            z-index: 10000;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            transform: translateX(-50%) translateY(-50%) scale(0) rotate(360deg);
            transition: all 0.3s ease 0s;
        }
        .src_before:before{
            opacity: 0.5;
            transform: translateX(-50%) translateY(-50%) scale(1.5) rotate(-360deg);
        }
        .section:after{
            content: "";
            width: 160%;
            height: 90%;
            background: radial-gradient(rgba(255,255,255,0.9),transparent,transparent);
            position: absolute;
            top: 0;
            left: -35%;
            opacity: 0;
            pointer-events: none;
        }
        .sec_after:after{ opacity: 1; }
        .xian1{
            display: none;
            position: absolute;
            transform-origin: center center;
            transform: rotate(75deg);
            left: 165px;
            top: 1060px;
        }
        .xian2{
            display: none;
            position: absolute;
            transform-origin: center center;
            transform: rotate(-45deg);
            left: 345px;
            top: 888px;
        }
        .xian3{
            display: none;
            position: absolute;
            transform-origin: center center;
            transform: rotate(-45deg);
            left: 345px;
            top: 1220px;
        }
        .chong{
            position: absolute;
            left: 188px;
            top: 618px;
        }
        .dan{
            position: absolute;
            left: 202px;
            top: 1027px;
        }
        .kedou{
            position: absolute;
            left: 210px;
            top: 1370px;
        }
        .ji{
            position: absolute;
            left: 685px;
            top: 590px;
        }
        .wa{
            position: absolute;
            left: 675px;
            top: 984px;
        }
        .hudie{
            position: absolute;
            left: 650px;
            top: 1383px;
        }
        .da{transform: scale(1.2);transition: all 0.6s;}
        .xiao{transform: scale(1);transition: all 0.6s;}
        .countdown{
            width: 275px;
            height: 36px;
            font-size: 36px;
            text-align: center;
            font-family: DFHaiBaoGB-W12;
            font-weight: normal;
            color: rgba(255,255,255,1);
            line-height: 36px;
            letter-spacing: 2px;
            position: absolute;
            left: 170px;
            top: 1810px;
        }
    </style>
</head>
<body>
<div class="commit_head">
    <img src="../../img/icon.gif" alt="" class="commit_icon"/>
    <span class="commit_build">熊孩子点吧</span>
    <img src="../../img/close.png" alt="" class="commit_close"/>
</div>
<div class="section">
    <img class="content" src="../../img/line6.jpg" alt="">
    <img src="../../img/line62/chong.png" class="chong"/>
    <img src="../../img/line62/dan.png" class="dan"/>
    <img src="../../img/line62/kedou.png" class="kedou"/>
    <img src="../../img/line62/ji.png" class="ji"/>
    <img src="../../img/line62/wa.png" class="wa"/>
    <img src="../../img/line62/hudie.png" class="hudie"/>
    <img class="xian1" src="../../img/xian3.png"/>
    <img class="xian2"  src="../../img/xian2.png"/>
    <img class="xian3"  src="../../img/xian2.png"/>
    <audio src="../../audio/fail.wav" id="fail" type="audio/mpeg"></audio>
    <audio src="../../audio/success.wav" id="success" type="audio/mpeg"></audio>
    <div class="countdown">倒计时：<span class="time">60</span>秒</div>
</div>
<script src="../../js/jquery-2.2.4.min.js"></script>
<script src="../../js/getrequest.js"></script>
<script>
    $(function () {
        /*设置显示的时间*/
        var count = 60;
        $('.time').html(count);
        /*设置定时器，1s一次*/
        var setV = setInterval(function () {
            count--;
            $('.time').html(count);
            /*判断当count的值小于0的时候游戏时间到，并关闭定时器*/
            if (count <= 0) {
                $("#success").get(0).play();
                setTimeout(function () {
                    $(".section").addClass("src_before");
                    $(".section").addClass("sec_after");
                }, 500);
                setTimeout(function () {
                    window.location.href = "../../result.html?id=" + id+"&mark=8";
                }, 1000);
            }
        },1000);
    });
    var a=GetRequest();
    var id=a['id'];
    if(id == "draw3"||id == "draw6"){
        $(".commit_build").html("画一画");
    }else if(id == "line3"||id == "line6"){
        $(".commit_build").html("连一连");
    }else if(id == "word3"||id == "word6"){
        $(".commit_build").html("找一找");
    }
    var mark =a['mark'];
    var startX,startY,endX,endY;
    var start = 0;
    $("body").on("touchstart", touchStartRecord)
        .on("touchmove", touchMoveShow)
        .on("touchcancel touchend", touchEndHide);
    function touchStartRecord(event){
        start = 0;
        endX = 0;
        endY = 0;
        $("#fail").get(0).load();
        startX = event.originalEvent.targetTouches[0].clientX;
        startY =event.originalEvent.targetTouches[0].clientY;
        if(startX>154 && startX<474 && startY>542 && startY<862){
            start = 1;
        }
        if(startX>601 && startX<921 && startY>1298 && startY<1618){
            start = 2;
        }
        if(startX>154 && startX<474 && startY>920 && startY<1240){
            start = 3;
        }
        if(startX>601 && startX<921 && startY>542 && startY<862){
            start = 4;
        }
        if(startX>154 && startX<474 && startY>1298 && startY<1618){
            start = 5;
        }
        if(startX>601 && startX<921 && startY>920 && startY<1240){
            start = 6;
        }
    };
    function touchMoveShow(event){
        endX = event.originalEvent.targetTouches[0].clientX;
        endY = event.originalEvent.targetTouches[0].clientY;
    };
    function touchEndHide(event){
        if(start == 1){
            if(endX>601 && endX<921 && endY>1298 && endY<1618){
                $(".xian1").css("display","block");
                $(".chong").addClass("da");
                $(".hudie").addClass("da");
                setTimeout(function () {
                    $(".chong").addClass("xiao");
                    $(".hudie").addClass("xiao");
                }, 600);
                start = 0;
                jump();
            }else if(endX>154 && endX<474 && endY>542 && endY<862){

            }else if(endX==0){

            }else{
                mark++;
                $("#fail").get(0).play();
            }
        }else if(start == 2){
            if(endX>154 && endX<474 && endY>542 && endY<862){
                $(".xian1").css("display","block");
                $(".chong").addClass("da");
                $(".hudie").addClass("da");
                setTimeout(function () {
                    $(".chong").addClass("xiao");
                    $(".hudie").addClass("xiao");
                }, 600);
                start = 0;
                jump();
            }else if(endX>601 && endX<921 && endY>1298 && endY<1618) {

            }else if(endX==0){

            }else{
                mark++;
                $("#fail").get(0).play();
            }

        }else if(start == 3){
            if(endX>601 && endX<921 && endY>542 && endY<862) {
                $(".xian2").css("display", "block");
                $(".dan").addClass("da");
                $(".ji").addClass("da");
                setTimeout(function () {
                    $(".dan").addClass("xiao");
                    $(".ji").addClass("xiao");
                }, 600);
                start = 0;
                jump();
            }else if(endX>154 && endX<474 && endY>920 && endY<1240){

            }else if(endX==0){

            }else {
                mark++;
                $("#fail").get(0).play();
            }
        }else if(start == 4){
            if(endX>154 && endX<474 && endY>920 && endY<1240){
                $(".xian2").css("display","block");
                $(".dan").addClass("da");
                $(".ji").addClass("da");
                setTimeout(function () {
                    $(".dan").addClass("xiao");
                    $(".ji").addClass("xiao");
                }, 600);
                start = 0;
                jump();
            }else if(endX>601 && endX<921 && v>542 && endY<862){

            }else if(endX==0){

            }else{
                mark++;
                $("#fail").get(0).play();
            }
        }else if(start == 5){
            if(endX>601 && endX<921 && endY>920 && endY<1240){
                $(".xian3").css("display","block");
                $(".kedou").addClass("da");
                $(".wa").addClass("da");
                setTimeout(function () {
                    $(".kedou").addClass("xiao");
                    $(".wa").addClass("xiao");
                }, 600);
                start = 0;
                jump();
            }else if(endX>154 && endX<474 && endY>1298 && endY<1618){

            }else if(endX==0){

            }else {
                mark++;
                $("#fail").get(0).play();
            }

        }else if(start == 6){
            if(endX>154 && endX<474 && endY>1298 && endY<1618){
                $(".xian3").css("display","block");
                $(".kedou").addClass("da");
                $(".wa").addClass("da");
                setTimeout(function () {
                    $(".kedou").addClass("xiao");
                    $(".wa").addClass("xiao");
                }, 600);
                start = 0;
                jump();
            }else if(endX>601 && endX<921 && endY>920 && endY<1240) {

            }else if(endX==0){

            }else{
                mark++;
                $("#fail").get(0).play();
            }
        }
    };
    function jump() {
        var xian1 = $(".xian1").css("display");
        var xian2 = $(".xian2").css("display");
        var xian3 = $(".xian3").css("display");
        if(xian1 == "block" && xian2 == "block" && xian3 == "block"){
            $("#success").get(0).play();
            setTimeout(function () {
                $(".section").addClass("src_before");
                $(".section").addClass("sec_after");
            }, 500);
            setTimeout(function () {
                window.location.href = "../../result.html?id=" + id+"&mark="+mark;
            }, 1000);
        }
    }
    //点击关闭
    $(".commit_close").click(function(){
        //调用安卓方法
        JsBinder.onFinishActivity();
    })
    JsBinder.setActivityClose(false); //隐藏浏览器右上角关闭图表
</script>
</body>
</html>